<template>
  <view class="GoodsInfo">
    <!-- 轮播区域 -->
    <view class="swiper-wrap">
      <u-swiper
        :list="swiperImgList"
        @change="getPage"
        :autoplay="false"
        :height="300"
        indicatorStyle="right: 20px"
      >
        <view slot="indicator" class="indicator-num">
          <text class="indicator-num__text">
            {{ swiperCurrent }}/{{ swiperImgList.length }}
          </text>
        </view>
      </u-swiper>
    </view>
    <!-- 产品描述 -->
    <view class="goods-info-wrap">
      <view class="goods-info-name">{{ goodItem.title }}</view>
      <view class="goods-info-price" v-if="goodItem.market_price"
        >￥{{ goodItem.market_price }}</view
      >
      <u-divider></u-divider>
      <view class="goods-info-des-wrap">
        <view class="goods-info-des1">人数：8</view>
        <view class="goods-info-des2" v-if="goodItem.cat_name">
          <text>类型：</text>
          <u-tag
            :text="goodItem.cat_name"
            size="mini"
            type="warning"
            shape="circle"
          ></u-tag>
        </view>
      </view>
    </view>
    <!-- 商品详情 -->
    <view class="goods-content-wrap">
      <u-icon
        :name="goodsIcon.name"
        :color="goodsIcon.color"
        :size="goodsIcon.size"
        :label="goodsIcon.label"
        :labelColor="goodsIcon.color"
      ></u-icon>
      <!-- 富文本区域 -->
      <view class="goods-info-content">
        <u-parse
          :content="goodItem.content"
          :selectable="true"
          :tagStyle="style"
        ></u-parse>
      </view>
    </view>
    <!-- 店内环境 -->
    <view class="goods-content-wrap">
      <u-icon
        :name="rulesIcon.name"
        :color="rulesIcon.color"
        :size="rulesIcon.size"
        :label="rulesIcon.label"
        :labelColor="rulesIcon.color"
      ></u-icon>
      <view class="goods-info-content">
        <u-scroll-list :indicator="indicator">
          <view v-for="(item, index) in list" :key="index">
            <image
              :src="item.thumb"
              style="width: 180rpx; height: 260rpx; margin-right: 40rpx"
            ></image>
          </view>
        </u-scroll-list>
      </view>
    </view>
    <!-- 顶部固定区域 -->
    <y-bottom-tab
      :iconList="iconList"
      :buttonName="buttonName"
      @iconClickHandler="iconClickHandler"
      @buttonHandler="buttonHandler"
    ></y-bottom-tab>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //轮播
      swiperImgList: [],
      swiperCurrent: 1,
      // 商品详情
      goodsIcon: {
        name: "photo",
        color: "#b2b2b2",
        size: "24",
        label: "商品详情",
      },
      goodItem: {
        title: "",
        market_price: "",
        cat_name: "",
        content: "",
      },
      style: {
        // 字符串的形式
        p: "color:#535353;font-size:28rpx;padding:10rpx 0",
        span: "font-size: 28rpx",
      },
      //店内环境
      rulesIcon: {
        name: "photo",
        color: "#b2b2b2",
        size: "24",
        label: "店内环境",
      },
      indicator: false,
      list: [
        {
          thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
        },
        {
          thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
        },
        {
          thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
        },
        {
          thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
        },
        {
          thumb: "https://cdn.uviewui.com/uview/goods/4.jpg",
        },
      ],
      //底部菜单
      iconList: [
        {
          name: "home",
          label: "首页",
          labelPos: "bottom",
          color: "#898989",
          labelColor: "#898989",
          size: "40rpx",
          labelSize: "20rpx",
        },
        {
          name: "chat",
          label: "咨询",
          labelPos: "bottom",
          color: "#898989",
          labelColor: "#898989",
          size: "40rpx",
          labelSize: "20rpx",
        },
      ],
      buttonName: "在线预约",
      goodsId: "",
    };
  },
  onLoad(options) {
    const { id } = options;
    this.goodsId = id;
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getMallDetails();
    },
    getPage(e) {
      this.swiperCurrent = e.current + 1;
    },
    iconClickHandler(val) {
      switch (val.index) {
        case 0:
          this.$Router.push({
            name: "index",
            type: "tab",
          });
          break;
        case 1:
          uni.makePhoneCall({
            phoneNumber: "13864153993", //仅为示例
          });
          break;
        default:
          break;
      }
    },
    buttonHandler() {
      let goodsId = this.goodsId;
      if (goodsId) {
        this.$Router.push({
          name: "appointment",
          query: {
            goodsId,
          },
        });
      } else {
        this.$utils.showToast("参数错误");
      }
    },
    //获取商品详情
    async getMallDetails() {
      const params = {
        type: 1,
        id: this.goodsId,
      };
      // 获取商品列表
      const res = await this.$api.getMallDetails(params);
      //轮播
      this.swiperImgList = res.images;
      //具体信息
      this.goodItem = {
        title: res.title,
        market_price: res.market_price,
        cat_name: res.cat_name,
        content: res.describe,
      };
    },
  },
};
</script>

<style lang="scss">
.GoodsInfo {
  .swiper-wrap {
    .indicator-num {
      padding: 2px 0;
      background-color: rgba(0, 0, 0, 0.35);
      border-radius: 100px;
      width: 35px;
      @include flex;
      justify-content: center;

      &__text {
        color: #ffffff;
        font-size: 12px;
      }
    }
  }
  .goods-info-wrap {
    padding: 30rpx 40rpx;
    border-bottom: 1px solid #ececec;
    background: #ffffff;
    margin-bottom: 20rpx;
    .u-divider {
      margin: 20rpx 0;
    }
    .goods-info-name {
      font-size: 30rpx;
      color: #353535;
      line-height: 20rpx;
    }
    .goods-info-price {
      padding-top: 20rpx;
      font-size: 32rpx;
      color: #ffbf01;
      font-weight: 600;
    }
    .goods-info-des-wrap {
      display: flex;
      font-size: 28rpx;
      color: #535353;
      align-items: center;
      .goods-info-des1 {
        padding-right: 60rpx;
      }
      .goods-info-des2 {
        align-items: center;
        display: flex;
        .u-tag-wrapper {
          padding: 0 15rpx;
        }
      }
    }
  }
  .goods-content-wrap {
    background: #ffffff;
    padding: 30rpx 40rpx;
    margin-bottom: 20rpx;
    .goods-info-content {
      padding: 20rpx 0;
    }
  }
}
</style>
<style>
page {
  background-color: #f4f4f4;
}
</style>
